import { authClient } from '@/lib/auth-client';
import dayjs from 'dayjs';
import { Button } from '../ui/button';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '../ui/dialog';
import { Label } from '../ui/label';
import EditPassword from './edit-password';
import EditUserInfo from './edit-user-info';
import UserAvatar from './user-avatar';

export default function UserInfo({ button }: { button: React.ReactNode }) {
  const { data: session } = authClient.useSession();
  const user = session?.user;
  if (!user) return null;

  return (
    <Dialog>
      <DialogTrigger asChild>{button}</DialogTrigger>
      <DialogContent>
        <DialogHeader className="space-y-4">
          <DialogTitle>用户信息</DialogTitle>
          <DialogDescription className="hidden" />
        </DialogHeader>
        <div className="flex items-center gap-7">
          <UserAvatar />
          <div>
            <div>{user.name}</div>
            <div className="text-muted-foreground text-sm">{user.email}</div>
          </div>
        </div>
        <div className="relative">
          <EditUserInfo />
        </div>
        <div className="grid grid-cols-2 gap-5 p-3">
          <div className="space-y-2">
            <Label>用户名</Label>
            <div>{user.username}</div>
          </div>
          <div className="space-y-2">
            <Label>昵称</Label>
            <div>{user.name}</div>
          </div>
          <div className="space-y-2">
            <Label>邮箱</Label>
            <div className="break-all">{user.email}</div>
          </div>
          <div className="space-y-2">
            <Label>注册时间</Label>
            <div>{dayjs(user.createdAt).format('YYYY-MM-DD HH:mm:ss')}</div>
          </div>
        </div>
        <EditPassword button={<Button>修改密码</Button>} />
      </DialogContent>
    </Dialog>
  );
}
